<template>
<div>
 <div class="user-top">
  <el-input v-model="search" style="width:20%;margin-left:10px" placeholder="订单编号"></el-input>
</div>
  <div class="user-table">
     <el-table
                border
                class="table"
                :data="data"
                ref="multipleTable"
                header-cell-class-name="table-header" 
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column prop="orderId" label="ID" width="55" align="center">
                </el-table-column>
                <el-table-column label="用户昵称" prop="nickName" align="center">
                </el-table-column>
                 <el-table-column label="订单编号" prop="orderNumber" align="center">
                </el-table-column>
                <el-table-column label="订单金额"  align="center">
                    <template #default="scope">
                     ￥{{scope.row.orderPrice}}
                    </template>
                </el-table-column>
                <el-table-column prop="payStatus" label="状态" align="center">
                    <template #default="scope">
                      <el-tag>{{scope.row.payStatus==1?"待发货":"已完成"}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="收货人" align="center">
                  <template #default="scope">
                     {{scope.row.addresses.name}}
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" align="center">
                    <template #default="scope">
                     {{scope.row.addresses.phone}}
                    </template>
                </el-table-column>
                 <el-table-column label="邮寄地址" align="center">
                    <template #default="scope">
                        {{scope.row.addresses.address}}
                        </template>
                    </el-table-column>
                <el-table-column prop="createTime" label="下单时间" align="center"></el-table-column>
                
                <el-table-column label="操作" width="180" align="center">
                    <template #default="scope">
                    <i class="el-icon-edit" v-if="scope.row.payStatus===1"  @click="editOrder(scope.row.orderId,scope.row.payStatus)"></i> 
                    <i class="el-icon-delete" @click="removeOrder(scope.row)"></i>
                    </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                <el-pagination
                    style="float: right;"
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :total="orders.length"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
  </div>
</div>
</template>

<script>
import {orderAll,getOrders,updateOrder,delOrder} from '@/api/index'
export default {
      data(){
        return {
          query:{
            pageIndex: 1, //当前页
            pageSize: 6   
          },
          search:"",
          orders:[]
        }
      },
      computed:{
        data(){
          return this.orders.slice((this.query.pageIndex-1)*this.query.pageSize,(this.query.pageIndex*this.query.pageSize))
        }
    },
    watch:{
      search:function(){
        console.log(this.search)
          getOrders(this.search).then(res=>{
            this.orders=res.data.data
          })
      }
    },
      created(){
        this.getOrderAll()
      },
      methods:{
         getOrderAll(){
           orderAll().then(res=>{
             this.orders=res.data.all
           })
         },
         handlePageChange(current){
            this.query.pageIndex=current
         },
         //删除订单状态
        removeOrder(row){
          let name=row.orderNumber
        this.$confirm('是否删除【'+name+"】", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delOrder(row.orderId).then(res=>{
               if(res.code==200){
                   this.$message.success("操作成功");
                   this.getOrderAll()
               }
           })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
         },
         //修改订单状态
         editOrder(e,payStatus){
             let params=new FormData()
             params.append("orderId",e);
             if(payStatus===1){
               params.append("payStatus",2);
             }
            updateOrder(params).then(res=>{
                this.getOrderAll();
            })
         }
      }
}
</script>

<style>
.user-top{
  display: flex;
}
</style>